<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>医生统计</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />
    <link rel="stylesheet" href="../Css/homePage.css" />
    <link rel="stylesheet" href="../Css/static.css" />
    <script src="../utils/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="header">
            <div class="title">
              <p><span>互联网医疗服务后台管理</span>
                    <div class="icon">
                        <div class="glyphicon glyphicon-user"><a id="username" href="./doctorAdmin.html">admin</a></div>
                        <div class="glyphicon glyphicon-home"><a href="./homePage.html">首页</a></div>
                        <div class="glyphicon glyphicon-off"><a href="./login.html">退出</a></div>
                    </div>
                </p>
            </div>
          </div>
          <div class="body">
            <div class="nav" id="nav">
              <li>
                  <h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u21.svg" alt="" style="top:5px ;"><a href="./homePage.html">首页</a></h4>
              </li>
              <li>
                  <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u29.png" alt=""> 医生管理</h4>
                  <ul class="nav nav-pills nav-stacked">
                      <li role="presentation"><a href="./doctorAdmin.html">医生列表</a></li>
                      <li role="presentation"><a href="./doctorReview.html">医生审核</a></li>
                      <li role="presentation"><a href="./serviceAudit.html">服务审核</a></li>
                    </ul>
              </li>
              <li>
                  <h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u23.png" alt=""><a href="./userAdmin.html">用户管理</a></h4>
              </li>
              <li>
                   <h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u34.svg" alt=""><a href="./prescriptionAdmin.html">处方管理</a></h4>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u41.svg" alt=""> 订单管理</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./consultationListManagement.html">问诊单管理</a></li>
                    <li role="presentation"><a href="./registrationOrderManagement.html">挂号单管理</a></li>
                    <li role="presentation"><a href="./drugOrderManagement.html">药品订单管理</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u42.png" alt=""> 财务管理</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./transactions.html">交易记录</a></li>
                    <li role="presentation"><a href="./settlementAdmin.html">结算管理</a></li>
                    <li role="presentation"><a href="./transferAdmin.html">转账管理</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u44.png" alt=""> 商品管理</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./commodityManagement.html">药品列表</a></li>
                    <li role="presentation"><a href="#">药品分类</a></li>
                    <li role="presentation"><a href="#">药品审核</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u48.svg" alt=""> 运营管理</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./runningManage.html">优惠券管理</a></li>
                    <li role="presentation"><a href="./runningManageSystem.html">系统消息</a></li>
                    <li role="presentation"><a href="#">APP推送消息</a></li>
                    <li role="presentation"><a href="#">短信消息</a></li>
                    <li role="presentation"><a href="#">广告管理</a></li>
                    <li role="presentation"><a href="#">活动管理</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u51.png" alt=""> 内容管理</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./carouselPage.html">轮播图管理</a></li>
                    <li role="presentation"><a href="./diseasePage.html">疾病科普</a></li>
                    <li role="presentation"><a href="#">医院管理</a></li>
                    <li role="presentation"><a href="#">医院科室管理</a></li>
                    <li role="presentation"><a href="#">药店管理</a></li>
                    <li role="presentation"><a href="#">平台科室管理</a></li>
                    <li role="presentation"><a href="./questionPage.html">常见问题</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u54.png" alt=""> 统计</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./tradeStatic.html">交易统计</a></li>
                    <li role="presentation"><a href="./userStatic.html">用户统计</a></li>
                    <li role="presentation"><a href="./docotorStatic.html">医生统计</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u57.svg" alt=""> 设置</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="./messageReminder.html">消息提醒</a></li>
                    <li role="presentation"><a href="./basicSettings.html">基本设置</a></li>
                  </ul>
              </li>
              <li>
                <div><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u19.svg" alt="" id="jiantou"></div><h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u62.png" alt=""> 权限</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a href="#">成员管理</a></li>
                    <li role="presentation"><a href="#">角色管理</a></li>
                    <li role="presentation"><a href="#">操作日志</a></li>
                    <li role="presentation"><a href="#">数据库管理</a></li>
                  </ul>
              </li>
              <li>
                <h4><img src="https://cimg.axureshop.com/90/7b/9a/907b9a01ce1f49f0a29a8c9909478853/images/系统架构/u61.png" alt=""><a href="./userAdmin.html">意见管理</a></h4>
            </li>
          </div>
            <div class="show">
                <div class="box">
                    <h2>用户统计</h2>
                    <!-- 交易统计 -->

                    <div class="box-nav">
                          <div class="box-nav-left">
                            <span>医生数据</span>
                        </div>
                        <div class="box-nav-right">
                            <div><button>导出数据</button></div>
                            <div>
                                <div class="selectDate">
                                    <select>
                                        <option>
                                            按月统计
                                        </option>
                                        <option>
                                            按订单来源统计
                                        </option>
                                        <option>
                                            按年统计
                                        </option>
                                    </select>
                                </div>
                            </div> 
                            <!-- 选择日期 -->
                            <div>  <input type="date" name="" id=""></div>
                        </div>

                    </div>
                    <div class="box-content">
                        <div class="box-content-content">
                            <!-- 绘制柱状图 -->
                            <div id="container" style=" width: 500px;height: 300px;"></div>

                        </div>
                    </div>
                    <br>
                    <!-- 订单来源 -->
                    <div class="box">
                        <div class="box-nav">
                             <div class="box-nav-left">
                                <span>用户来源</span>
                            </div>
                            <div class="box-nav-right">
                                <button>导出数据</button>
                                <button class="thisMonth">本月</button>
                                <button class="lastMonth">上月</button>
                                <input type="date" name="" id="">
                            </div>

                        </div>
                        <div class="box-content">
                            <div class="box-content-content">
                                <div id="pieChart"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <script src="../js/homePage.js"></script>

            <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
            <script>
                var aH6 = document.querySelectorAll("#nav h6");
                var aUl = document.querySelectorAll("#nav ul");

                for (var i = 0; i < aH6.length; i++) {
                    aH6[i].onclick = function () {

                        var oUl = this.nextElementSibling;

                        if (getComputedStyle(oUl).height == "0px") {
                            //先对所有#nav里面的ul设置高度为0px，相当于清空样式（这样点开那个显示那个）
                            for (var i = 0; i < aUl.length; i++) {
                                aUl[i].style.height = "0px";
                            }

                            //ul的高度 = ul第一个孩子节点li的高度 * 所有li的长度
                            oUl.style.height =
                                oUl.children[0].offsetHeight * oUl.children.length + "px"; //offsetHeight获取的是占位大小：内容+padding+border
                        } else {
                            oUl.style.height = "0px";
                        }
                    };
                }

                // 饼状图插件导入
                //数据
                var data = {
                    title: ' ',
                    dataList:
                        [
                            { name: "图文问诊", rate: 0.299, color: "#f60" },
                            { name: "电话问诊", rate: 0.158, color: "#64f" },
                            { name: "视频问诊", rate: 0.189, color: "#0f6" },
                            { name: "预约挂号", rate: 0.126, color: "#5d4" },
                            { name: "复诊开药", rate: 0.228, color: "#fcc" }
                        ]
                }
                //画布
                var cvs = document.createElement("canvas");
                var pieChart = document.getElementById("pieChart");
                pieChart.appendChild(cvs);
                cvs.width = 760;
                cvs.height = 500;
                cvs.style = "display:block;margin:0 auto;background:#eee;";
                var ctx = cvs.getContext("2d");
                //绘制标题
                ctx.font = "16px 黑体";
                ctx.textAlign = "center";
                ctx.textBaseline = "midddle";
                ctx.fillText(data.title, cvs.width / 2, 25);
                //绘制左边实例图标
                ctx.textAlign = "left";
                ctx.font = "12px 微软雅黑";
                ctx.textBaseline = "bottom";
                for (var i = 0; i < data.dataList.length; i++) {
                    ctx.beginPath();
                    ctx.arc(30, 50 + 20 * i, 10, 1.5 * Math.PI - 0.2 * Math.PI, 1.5 * Math.PI + 0.2 * Math.PI, false);
                    ctx.lineWidth = 5;
                    ctx.strokeStyle = data.dataList[i].color;
                    ctx.stroke();
                    ctx.fillText(data.dataList[i].name, 45, 50 + 20 * i);
                }
                //绘制饼图
                var startAngle = 1.5 * Math.PI;
                var endAngle, lineAngle;
                for (var j = 0; j < data.dataList.length; j++) {
                    ctx.beginPath();
                    ctx.moveTo(500, 250);
                    endAngle = startAngle + data.dataList[j].rate * 2 * Math.PI;
                    ctx.arc(500, 250, 100, startAngle, endAngle, false);
                    ctx.closePath();
                    ctx.fillStyle = data.dataList[j].color;
                    ctx.fill();
                    startAngle = endAngle;
                    lineAngle = endAngle - data.dataList[j].rate * Math.PI - 1.5 * Math.PI;
                    ctx.beginPath();
                    ctx.moveTo(500 + 100 * Math.sin(lineAngle), 250 - 100 * Math.cos(lineAngle));
                    ctx.lineTo(500 + 120 * Math.sin(lineAngle), 250 - 120 * Math.cos(lineAngle));
                    ctx.textBaseline = "midddle";
                    if (lineAngle <= Math.PI) {
                        ctx.lineTo(500 + 120 * Math.sin(lineAngle) + 15, 250 - 120 * Math.cos(lineAngle));
                        ctx.textAlign = "left";
                        ctx.fillText(data.dataList[j].name, 500 + 120 * Math.sin(lineAngle) + 20, 250 - 120 * Math.cos(lineAngle));
                    }
                    else {
                        ctx.lineTo(500 + 120 * Math.sin(lineAngle) - 15, 250 - 120 * Math.cos(lineAngle));
                        ctx.textAlign = "right";
                        ctx.fillText(data.dataList[j].name, 500 + 120 * Math.sin(lineAngle) - 20, 250 - 120 * Math.cos(lineAngle));
                    }
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = data.dataList[j].color;
                    ctx.stroke();
                }
                //生长动画
                var overOver = document.createElement('canvas');
                pieChart.appendChild(cvsOver);
                cvsOver.width = cvs.width;
                cvsOver.height = cvs.height;
                pieChart.style.position = "relative";
                cvsOver.style.position = "absolute";
                cvsOver.style.top = 0;
                cvsOver.style.left = 0;
            </script>

            <!-- 绘制柱状图script -->
            <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
            <script type="text/javascript">
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '柱状图分数划分';
                var namedate = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                var numdate = [64, 80, 100, 56, 23, 57, 54, 28, 270, 47];
                var colorlist = [];
                numdate.forEach(element => {
                    if (element < 60) {
                        colorlist.push(["#fc7095", "#fa8466"])
                    } else if (element >= 60 && element < 90) {
                        colorlist.push(["#386ffd", "#74b3ff"])
                    } else {
                        colorlist.push(["#1aa8ce", "#49d3c6"])
                    }
                });
                option = {

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: namedate,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#4dd1c4",
                                    width: 1
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#999'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} ',
                                show: true,
                                textStyle: {
                                    width: '10px',
                                    color: '#999'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#4dd1c4",
                                    width: 0.1
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#ddd'
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            barWidth: '60%',
                            data: numdate,
                            itemStyle: {
                                normal: {
                                    // color: new echarts.graphic.LinearGradient(
                                    //     0, 0, 0, 1,
                                    //     [
                                    //         {offset: 1, color: 'red'},
                                    //         {offset: 0, color: 'orange'}
                                    //     ]
                                    // )
                                    color: function (params) {
                                        // var colorList = colorlist;
                                        // return colorList[params.dataIndex];
                                        var colorList = colorlist

                                        var index = params.dataIndex;
                                        // if(params.dataIndex >= colorList.length){
                                        //         index=params.dataIndex-colorList.length;
                                        // }
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                            [
                                                { offset: 1, color: colorList[index][0] },
                                                { offset: 0, color: colorList[index][1] }
                                            ]);


                                    }
                                }
                            }
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>
</body>

</html>